<template>
  <view class="cart">
    <view class="goods-list">
      <view
        class="goods"
        v-for="(item, index) in cartList"
        :key="item.goods_id"
      >
        <!-- 1 复选框 -->
        <view class="goods-chk">
          <radio-group @click="handleGoodsChange(index)">
            <radio
              :value="item.goods_id"
              class="chk"
              color="#eb4450"
              :checked="item.checked"
            ></radio>
          </radio-group>
        </view>
        <!-- 2 图片 -->
        <view class="goods-img">
          <u-image
            width="100%"
            mode="widthFix"
            :src="item.goods_small_logo"
          ></u-image>
        </view>
        <!-- 3 名称 -->
        <view class="goods-info">
          <!-- 商品名称 -->
          <view class="goods-name u-line-2">{{ item.goods_name }}</view>
          <!-- 商品编辑栏 -->
          <view class="goods-tool">
            <view class="goods-price ">￥{{ item.goods_price }}</view>
            <view class="goods-count">
              <view class="goods-edit" @click="handleCountUpdate(index, -1)"
                >-</view
              >
              <view class="goods-num">{{ item.count }}</view>
              <view class="goods-edit" @click="handleCountUpdate(index, 1)"
                >+</view
              >
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 全选 -->
    <view class="status-tool">
      <view class="all-chk">
        <radio-group>
          <radio @click="handleAllCheck" color="#eb4450" :checked="allChecked"
            >全选</radio
          >
        </radio-group>
      </view>
      <!-- 总价 -->
      <view class="price">
        合计：<text>￥{{ allPrice }}</text>
      </view>
      <view class="settle" @click="goOrder">去结算({{ allCount }})</view>
    </view>
  </view>
</template>

<script>
export default {
  computed: {
    cartList() {
      return this.$store.state.cartList;
    },
    // 计算全选 是否要选中
    allChecked() {
      return this.cartList.length && this.cartList((goods) => goods.checked);
    },
    // 购买的总数量
    allCount() {
      return this.$store.getters.allCount;
    },
    // 总的价格
    allPrice() {
      // let allPrice = 0;
      // this.cartList.forEach((goods) => {
      //   if (goods.checked) {
      //     allPrice += goods.goods_price * goods.count;
      //   }
      // });
      // return allPrice;
      return this.$store.getters.allPrice;
    },
    allChecked() {
      return (
        this.cartList.length && this.cartList.every((goods) => goods.checked)
      );
    },
  },
  methods: {
    // 商品的单选事件
    handleGoodsChange(index) {
      const cartList = this.cartList;
      // 找到当前复选框所在的数组中的元素

      // 元素的选中属性 取反
      cartList[index].checked = !cartList[index].checked;
      this.$store.commit("setCartList", cartList);
    },
    // 数量的编辑
    async handleCountUpdate(index, num) {
      const cartList = this.cartList;

      // 判断当前用户是不是想要做删除
      // 条件： 当前的商品数量为1 ，而且用户点击的按钮 "-"
      if (cartList[index].count === 1 && num === -1) {
        // 弹出窗口
        // 小程序中内置有弹出窗口 api
        // uni api  showModal 返回值  数组  [err,返回值]
        const [err, result] = await uni.showModal({
          title: "提示",
          content: "您真的舍得删除吗",
          showCancel: true,
          cancelText: "取消",
          cancelColor: "#000000",
          confirmText: "确定",
          confirmColor: "#3CC51F",
        });

        if (result.confirm) {
          // 点击确定
          console.log("点击确定");
          cartList.splice(index, 1);
          this.$store.commit("setCartList", cartList);
        } else {
          // 点击的取消
          console.log("点击取消");
        }
      } else {
        // 正常删除
        cartList[index].count += num;
        this.$store.commit("setCartList", cartList);
      }
    },
    handleAllCheck() {
      const checked = !this.allChecked;
      const cartList = this.cartList;
      cartList.forEach((goods) => (goods.checked = checked));
      this.$store.commit("setCartList", cartList);
    },
    goOrder() {
      if (this.allCount > 0) {
        uni.navigateTo({
          url: "/pages/pay/pay",
        });
      } else {
        uni.showToast({
          title: "没有选择",
          icon: "none",
        });
      }
    },
  },
};
</script>
<style lang="scss">
.cart {
  .goods-list {
    .goods {
      display: flex;
      padding: 10rpx;
      border-bottom: 1rpx solid #eee;
      .goods-chk {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        .chk {
          border-radius: 50%;
        }
      }

      .goods-img {
        flex: 2;
        padding: 10rpx;
      }

      .goods-info {
        flex: 3;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .goods-name {
        }

        .goods-tool {
          display: flex;
          justify-content: space-between;
          .goods-price {
            font-size: 30rpx;
            color: $themeColor;
          }

          .goods-count {
            width: 150rpx;
            justify-content: space-between;
            display: flex;
            .goods-edit {
              width: 40rpx;
              height: 40rpx;
              border: 1px solid #ccc;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 50%;
            }

            .goods-num {
            }
          }
        }
      }
    }
  }
}
.status-tool {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  background-color: #fff;
  height: 80rpx;
  border-top: 1rpx solid #eee;
  display: flex;
  padding: 0 10rpx;
  align-items: center;
  justify-content: space-between;
  .all-chk {
    radio-group {
      radio {
      }
    }
  }
  .price {
    flex: 1;
    padding: 0 30rpx;
    text {
      font-size: 30rpx;
      color: $themeColor;
    }
  }

  .settle {
    width: 170rpx;
    height: 50rpx;
    font-size: 24rpx;
    border-radius: 25rpx;
    background-color: $themeColor;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
